/**
* @description: 待办 工程审核
* @author: JiWei
* @remark:
**/
<template>
  <view class="problem-main">
    <nav-bar class="header" back title="工程审核" @goBack="goBack"></nav-bar>
    <view class="problem-content">
      <plateTitle title="基本信息" :isRequired="false" class="plate-title" />
      <view class="basic-info">
        <van-field  v-model="problemForm.engName" label="工程名称" placeholder="请选择工程名称"
                    type="textarea" autosize
                    disabled input-align="right"/>
        <van-field v-model="problemForm.siteName" label="站点名称" placeholder="请输入站点名称"
                   input-align="right" disabled/>
        <van-field v-model="problemForm.batchName" label="工程批次" placeholder="请输入工程批次"
                   input-align="right" disabled/>
        <van-field v-model="problemForm.consName" label="现场负责人" placeholder="请输入现场负责人"
                   input-align="right" disabled/>
    </view>
      <!-- 问题装置循环  -->
      <view>
        <!-- 第一层循环  -->
        <van-collapse v-model="problemActiveNames" >
          <view  v-for="(firstItem,firstIndex) in rectificationList" :key="firstIndex">
          <van-collapse-item class="arrive-fold" :name="firstItem.title" size="large">
                <template #title>
                  <view>
                    <text class="title-collap">{{ firstItem.title }}</text>
                  </view>
                </template>
                <!-- 第二层循环 -->
                <van-collapse v-model="equipmentActiveNames"  >
                  <view v-for="(equItem, equIndex) in firstItem.equList" :key="equIndex">
                    <van-collapse-item class="arrive-second" :name="equItem.title" size="large">
                      <template #title>
                        <view>
                          <text class="small-title">{{ equItem.title }}</text>
                        </view>
                      </template>
                      <!--   第三层循环  -->
                      <view class="rectify-content" v-for="(isNotItem,isNotIndex) in equItem.isNotList" :key="isNotIndex">
                      <template>
                        <view class="resctify-main">
                          <view class="main-top">
                            <text class="main-title">
                              {{ isNotItem.title }}
                            </text>
                            <text class="small-title" :class="stateColor(isNotItem.selectName)">{{isNotItem.selectName}}</text>
                          </view>
                          <template v-if="isNotItem.selectName === '是'">
                            <view class="image-list" v-for="(imgItem,imgIndex) in isNotItem.fileList" :key="imgIndex">
                              <img :src="imgItem.img" alt=""  @click="imageHandle(imgIndex, imgItem)" >
                            </view>
                          </template>
                          <view class="signintitle" v-else>
                            <view class="notes">不执行说明</view>
                            <view class="notestext">
                              <van-field v-model="isNotItem.notesAfter" rows="3" disabled="" autosize label="" type="textarea" placeholder="请输入不执行说明" class="textarea" readonly/>
                            </view>
                          </view>
                        </view>

                      </template>

                      </view>
                      <view class="btns" v-if="isSave">
                        <van-button block native-type="submit" @click="goPass(equItem,firstIndex,equIndex)">通过</van-button>
                        <van-button class="btn-right" block native-type="submit" @click="goUnPass(firstIndex,equIndex)">未通过</van-button>
                      </view>
                      <view v-if="!equItem.isPass" class="unpasswrap">
                        <view>
                          <van-field
                              v-model="equItem.note"
                              rows="1"
                              autosize
                              type="textarea"
                              placeholder="请输入审批意见"
                          />
                        </view>
                        <van-button block native-type="submit" @click="goSubmit(equItem)">提交</van-button>
                      </view>
                    </van-collapse-item>
                  </view>
                </van-collapse>
              </van-collapse-item>
		      </view>
        </van-collapse>

      </view>
    </view>
    <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
      <van-swipe>
        <div v-for="(image, index) in files" :key="index">
          <van-swipe-item v-if="image.img" style="text-align: center;">
            <img :src="image.img" />
          </van-swipe-item>
        </div>
      </van-swipe>
    </van-popup>
  </view>
</template>
<script>
import navBar from "../../../../components/common/nav-bar";
import plateTitle from '../../common/plateTitle.vue'
import {Dialog, Toast} from "vant";
import config from "../../../../common/config.js";
import {mapGetters} from "vuex";
export default {
  name: 'projectAudit',
  components: { navBar,plateTitle },
  props: {},
  data() {
    return {
      baseUrl:'',
      problemForm:{
        engName:'',
        siteName:'',
        batchName:'',
        consName:''
      },
      isSave: true,// 判断收否已经点过通过
      problemActiveNames: [],// 具体问题展开
      equipmentActiveNames: [],// 具体设备展开
      rectificationList:[],
	    STATUS_EXAM:null,
      isShowSubmit: false,
      stateColor:(item) => {
        if(item === '否') {
          return 'left-state-yq'
        }else {
          return 'left-state-tq'
        }
      },
      engId:'',
      stationId:'',
      state:'', //判断返回页面
      files:[],
      showPreview: false,
    };
  },
  computed: {
	  ...mapGetters(['userData','txgkAuth'])
  },
  watch: {},
  onLoad(option) {
    this.engId = option.engId
    this.stationId = option.stationId
    this.state = option.state
	  this.getproblemDetail(option.engId,option.stationId)
	  config.getOptions.then(res => {
	    this.baseUrl = res.firstUrl;
      // this.baseUrl = 'http://192.168.0.127:18001';
	  })
  },
  methods: {
    imageHandle(index, item) {
      this.files = [item]
      this.showPreview = true
    },
	  goPass(item,firstIndex,equIndex){
		  this.rectificationList[firstIndex].equList[equIndex].isPass = true;
		  let passparams = {
			  "FILL_DETAIL_ID": item.objId, //填报记录id 批量审核 用逗号分开
			  "NE_SN": item.title, //设备名称
			  "EXAM_USER": this.userData.USERID, //审核人id
			  "EXAM_USERNAME": this.userData.USERNAME, //审核人名称
			  "STATUS_EXAM": "1", //审核状态(0 不通过 1通过)
			  "EXAM_NOTES": "", //不通过意见
			  "EXAM_TYPE": "0" //审核类型（0-工程审核、1-验收审核、2-建转运审核）
		  }
		  this.insertTxgcgkDtFillLogs(item,passparams);
	  },
	  goSubmit(item){
		  let submitparams = {
			  "FILL_DETAIL_ID": item.objId, //填报记录id 批量审核 用逗号分开
			  "NE_SN": item.title, //设备名称
			  "EXAM_USER": this.userData.USERID, //审核人id
			  "EXAM_USERNAME": this.userData.USERNAME, //审核人名称
			  "STATUS_EXAM": "0", //审核状态(0 不通过 1通过)
			  "EXAM_NOTES": item.note, //不通过意见
			  "EXAM_TYPE": "0" //审核类型（0-工程审核、1-验收审核、2-建转运审核）
		  }
		  this.insertTxgcgkDtFillLogs(item,submitparams);
	  },
	  goUnPass(firstIndex,equIndex){
		  this.rectificationList[firstIndex].equList[equIndex].isPass = false;
	  },
	  insertTxgcgkDtFillLogs(item,params){
		 this.$apiRequest.gcgkApi.insertTxgcgkDtFillLogs(params).then(res => {
       if(res.code == 0) {
         this.isSave = false
         item.isPass = true
         uni.reLaunch({
           url: `/pages/communicationControl/workbench/todoTask/projectAudit?engId=${this.engId}&stationId=${this.stationId}`
         })
       }
			 Dialog.alert({
				 message:res.msg
			 })
		 })
	  },
    getproblemDetail(engId,stationId){
	    let params = {
			engId,
			stationId,
			statusExam: '2'
	    }
	    this.$apiRequest.gcgkApi.getProblemDetail(params).then(res => {
			let txgcgkDtEng = res.data.txgcgkDtEng,rectificationList = res.data.rectificationList;
			rectificationList.map((item)=>{
				this.problemActiveNames.push(item.title)
				item.equList && item.equList.map((equitem)=>{
				  equitem.isPass = true
					equitem.note = "";
					equitem.isNotList.map((isnotitem)=>{
						isnotitem.fileList.length>0 && isnotitem.fileList.map((fileitem,index)=>{
							fileitem.img = this.baseUrl
                  + fileitem.img
						})

					})
					this.equipmentActiveNames.push(equitem.title)
				})
			})
			console.log(rectificationList,"rectificationList")
			this.problemForm = {
			  engName:txgcgkDtEng.engName,
			  siteName:txgcgkDtEng.stationName,
			  batchName:txgcgkDtEng.batchName,
			  consName:txgcgkDtEng.consName
			}
			this.rectificationList = rectificationList;
		})
    },

    goBack() {
      if(this.state === 'index') {
        uni.navigateTo({
          url: '/pages/communicationControl/index/index'
        })
      }else {
        uni.navigateTo({
          url: '/pages/communicationControl/workbench/todoTask/todoList'
        })
      }
    }
  }
};
</script>
<style scoped lang="scss">
.problem-main {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #F2F6FA;
  .problem-content {
    width: calc(100% - #{px2vw(60)});
    margin: px2vh(30) px2vw(30);
    height: calc(100vh - #{px2vh(230)});
    overflow: auto;
    .plate-title {
      margin-bottom: px2vh(30);
    }
    .basic-info {
      height: auto;
      margin-bottom:px2vh(30);
      background: #fff;
    }
    .title-collap {
      font-size: px2vh(40);
      font-weight: bold;
      color: #666;
    }
	.btns{
		background-color: #fff;
		height: px2vw(160);
	}
	.unpasswrap{
		height: auto;
		background-color: #fff;
		padding-bottom: px2vh(10);
		/deep/.van-button{
			width: 100%;
			float: none;
		}
	}
    .rectify-content {
      height: auto;
      .resctify-main {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        box-sizing: border-box;
        background: #fff;
        .notes-content {
          font-size: px2vh(32);
          line-height: px2vh(60);
          padding: 0 px2vw(18);
        }
        .main-top {
          width: 100%;
          display: flex;
          flex-direction: row;
          margin: px2vh(60) px2vw(48) 0;
          font-size: px2vh(42);
          .main-title {
            flex: 1;
            color: #666;
          }
          .small-title {
            font-size: px2vh(32);
            line-height: px2vh(60);
            padding: 0 px2vw(18);
            border-radius: px2vw(10);
          }
          .left-state-tq {
            color: #3CDA68;
            background: rgba(60, 218, 104, .1);
          }
          .left-state-yq {
            color: #FF7070;
            background: rgba(255, 112, 112, .1);
          }
        }
        .image-list {
          width: px2vw(230);
          height: px2vw(230);
          flex-shrink: 0;
          margin: 0 calc((100% - #{px2vw(690)}) / 6) px2vh(45) calc((100% - #{px2vw(690)}) / 6);
          img {
            width: px2vw(230);
            height: px2vh(230);
          }
        }
        .upload-button {
          width: px2vw(230);
          height: px2vw(230);
          flex-shrink: 0;
          position: relative;
          background-image: url('../../../../static/controlImg/bg_pz.png');
          background-size: 100% px2vw(230);
          margin: 0 calc((100% - #{px2vw(690)}) / 6) px2vh(60);
          .typetext {
            background-color: #fff;
            position: absolute;
            bottom: px2vh(-70);
            left: calc(50% - #{px2vw(46)});
            color: #dbdbdb;
            font-size: px2vh(42);
            span {
              color: #ff4355;
            }
          }
          .delete-icon {
            position: absolute;
            top: px2vw(-20);
            right: px2vw(-20);
            width: px2vw(40);
            height: px2vw(40);
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 50%;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .signintitle {
          width: 100%;
          flex-direction: column;
          font-size: px2vh(42);
          color: #666666;
          padding-bottom: px2vh(60);
          box-sizing: border-box;
          .notes {
            padding: px2vh(54) 0;
            box-sizing: border-box;
            // border-bottom: 2px dashed #f2f6fa;
            margin: 0 px2vh(50) 0;
            span {
              color: #ff4355;
            }
          }
          .notestext {
            background-color: #fafafa;
            margin: 0 px2vh(50);
            /deep/.van-cell {
              background-color: #fafafa;
            }
          }
        }
      }
    }
    .btn-right {
      margin-left: px2vw(40);
    }
  }
}
.arrive-fold /deep/.van-cell {
  background: #F2F6FA;
}
/deep/.van-collapse-item__content {
  padding: 0 0 !important;
  background: #F2F6FA;
}
/deep/.van-cell--large {
  padding: px2vh(16) px2vw(20);
}
.arrive-second /deep/.van-cell {
  background: #fff;
}
/deep/.van-hairline--top-bottom {
  margin-bottom: px2vh(20);
}
/deep/.van-collapse-item__content {
  padding-left: px2vw(30);
}
/deep/.van-button {
  width: 47%;
  height: px2vh(120);
  color: #fff;
  float: left;
  margin-bottom: px2vh(20);
  background-color: #417ADC;
  border: 1px solid #417ADC;
  border-radius: px2vh(60);
}
.van-preview-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;

  .van-swipe {
    width: 100%;
    height: 60%;

    .van-swipe-item {
      display: flex;
      align-items: center;

      img {
        width: 100%;
      }
    }
  }
}
</style>
